<template>
    <view class="page-content">
        <navbar fixed leftIcon="left" :title="head_symbol+' 贡献池'" shadow></navbar>
        <view class="p-l-20 p-r-20 p-b-40 p-t-30">
            <!--<view @click="choseWallet" class="view flex-row align-center justify-between w104 h30 m-t-20 m-b-20" style="background:#6781FF;border-radius: 15px;">
                <view class="fz-12 c-fff p-l-10 ">{{Object.keys(defaultWallet).length > 0 ? defaultWallet.name : '未创建钱包'}}</view>
                <view class="w20 h20 bg-fff view align-center justify-center m-r-5" style="border-radius:50%;">
                    <uni-icons type="right" size="12" color="#748FAC"/>
                </view>
            </view>  -->
            
		
           <computing :basicid="id" ref="computing"/>

			<view class="view flex flex-row justify-between p-l-12 p-r-12 p-t-10 p-b-10" style="border-radius:12px;background:#6781FF;">
			   <view class="fz-10 c-fff">
			       <view class="tag-c">当前预估质押贡献值</view>
			   </view>
			    <view class="fz-16 c-fff text-right bold ">{{  power }}</view>
			</view>

			<!-- <view class="tips error">
				由于数据跨链，确认资产快照中。该入口开放到3月31日，请尽快进行确认。确认后会通过合约发放空投并按原定矿池数据进行挖矿。
				<el-button @click="gotoCheck" class="btn-c m-t-40" block style="border-radius: 12px !important;" type="primary">前往确认</el-button>
			</view>
			 -->
            <view class="m-b-15 fz-16 c-798 m-t-20 bold">{{head_symbol}} 贡献池</view>
            <view class="p-l-14 p-r-14 bg-fff p-t-20 p-b-20 rel" style="border-radius: 19px;box-shadow: 0px 2px 10px 0px rgba(58, 73, 145, 0.13);">
                
                <view class="p-t-20 p-b-20 view flex-row align-center justify-between" style="border-bottom:1px solid #EDEDED;">
                    <view class="view flex-row align-center">
                        <image :src="'/static/token/'+symbol+'.png'" class="w50 h50 m-r-10"/>
                        <view>
                            <view class="m-b-6 bold c_0a1">{{ symbol.toUpperCase() }}</view>
                            <view class="fz-14 c_cfd">{{ min_num }}起投</view>
                        </view>
                    </view>

                    <view>
                        <view class="m-b-6 bold c_0a1 m-b-7">我的余额</view>
                        <view class="c_608 fz-14 text-right">{{ blance }}</view>
                    </view>
                </view>
                
                <view class="h30 view flex-row align-center justify-between p-l-15 p-r-15 m-t-14">
                    <input style="border:0;height:60rpx;" placeholder="请输入数量" type="number" v-model="stake_token"/>
                    <div style="color:#6082FF;" @click="getAllBlance">全部</div>
                </view>
                
				<view class="dig-middle-button">
					+
				</view>
				<!--<view class="dig-middle-button">
					<image src="/static/img1/mining pool_icon_Not pledged_default.png" class="w30 h30"/>
                    <view class="c-fff bold fz-14">质押NFT</view>
				</view>-->
            </view>

            <view class="p-l-14 p-r-14 bg-fff p-t-20 p-b-20 m-t-10" style="border-radius: 19px;box-shadow: 0px 2px 10px 0px rgba(58, 73, 145, 0.13);">
                
                <view class="p-t-20 p-b-20 view flex-row align-center justify-between" style="border-bottom:1px solid #EDEDED;">
                    <view class="view flex-row align-center">
                        <!--<image src="/static/token/DSX.png" class="w50 h50 m-r-10"/>-->
						<view>
                            <view class="m-b-6 bold c_0a1">NFT</view>
                            <view class="fz-14 c_cfd">{{ min_nft }}贡献值起投</view>
                        </view>
                    </view>

                    <view class="w117 h43 view align-center justify-center" style="background: #6781FF;color:#fff;border-radius:10px;" @click="showDrawer">
                            选择NFT
                    </view>
                </view>
                
                <view class="minh30 view flex-row align-center  p-l-15 p-r-15 m-t-14">
                    
                    <view class="fz-10">已选择：</view>
                    <view class="view flex-row align-center flex-wrap">
                        <view v-for="(item,index) in selectNFT" :key="index" class="m-r-5 c-122 fz-10">{{ item.nft_name }} * {{ item.numVal }};</view>
                    </view>
                </view>
            </view>
            <el-button :loadin="loading" :disabled="disabled"  class="btn-c m-t-40" block style="border-radius: 12px !important;" type="primary" @click="confirmOrder">确认贡献</el-button>
        </view>
        
        <uni-drawer ref="showRight" mode="right" :width="drawerW" class="maskShowIn">
            <select-page @selectCommit="updateSelectNums" ref="selectPage"/>
        </uni-drawer>

        <confirmWallet ref="walletComp_mining" :openType="2" :params="params" @confirm="handlePledge"/>
    </view>
</template>

<script>
import navbar from '@/components/uni-nav-bar'
import uniIcons from '@/components/uni-icons/uni-icons'
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot'
import  uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import elButton from '@/components/el-button/el-button'
import uniDrawer from '@/components/uni-drawer/uni-drawer'
import selectPage from './select.vue'
import computing from '@/components/computing/index'
import { mapState } from 'vuex'
import { calculate, doPledge } from '@/apis/pool'
import {getTokenBalance} from '@/apis/bsc20'
import confirmWallet from '@/components/confirmWallet/index.vue'
export default {
    components: {
      navbar,
      uniEasyinput,
      uniIcons,
      uniSwiperDot,
      elButton,
      uniDrawer,
      selectPage,
      computing,
      confirmWallet
	},
	computed: {
		...mapState(['defaultWallet']),
        
	},
    watch: {
        selectNFT: function (val) {
            if (val.length > 0 && Number(this.stake_token) >= Number(this.min_num) ) {
                this.checkOnData()
            } else {
                this.power = '? ? ?'
            }
        },
        stake_token: function (val) {
            if (this.selectNFT.length > 0 && Number(val) >= Number(this.min_num) ) {
                this.checkOnData()
            } else {
                this.power = '? ? ?'
            }
        }
    },
    data() {
        return {
            id: '',
            drawerW: '', 
            stake_token: 0, // 数量
            current: 0,
            blance: 0,
            power: '? ? ?',
            disabled: true,
            loading: false,
            selectNFT: [], //选中的nft
            min_num:  '',
            params: {
				token: 'CHB',
			},
            min_nft: '',
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            symbol: '', // 矿池为 CHB，矿池为DSX
			head_symbol: '', //需要写死。1为DSX，2为CHB
            list: [
                {
                    src: 'http://tlsoss.tlskoc.com/images/1/2021/12/ha73z7fU39qM7TxP9GUm3Y9u47ZM9f.jpg'
                },
                {
                    src: 'http://tlsoss.tlskoc.com/images/1/2021/12/ha73z7fU39qM7TxP9GUm3Y9u47ZM9f.jpg'
                },
                {
                    src: 'http://tlsoss.tlskoc.com/images/1/2021/12/ha73z7fU39qM7TxP9GUm3Y9u47ZM9f.jpg'
                }
            ]
        }
    },
	onShow() {
	  this.fetchData()
	},
    onLoad (opt) {
        this.symbol = opt?.symbol.toUpperCase() ?? ''
        this.min_num = opt?.min_num ?? ''
        this.min_nft = opt?.min_nft ?? ''
        this.id = opt?.id ?? ''
		this.params.token = this.symbol
		if(this.id == 2){
			this.head_symbol = 'CHB'
		}else{
			this.head_symbol = 'DSX'
		}
        this.initPoolData()
    },
    methods: {
        // 获取全部
        getAllBlance() {
            this.stake_token = this.blance
        },
        confirmOrder() {
            if (this.power > 0) { 
				let that = this;
                this.$refs.walletComp_mining.onShowDialog()
                this.params = {
                    pay_amount: this.stake_token,
                    power: this.power,
                    selectNFT: this.selectNFT
                }
            }
		},
        // 质押挖矿
        async handlePledge () {
            if (this.power > 0) {
                let stake_nft = this.selectNFT.map( item => {
                        item.nft_id = item.id
                        item.number =  item.numVal
                        return item
                })
                this.loading = true
                uni.showLoading()
                const res = await doPledge({
                    stake_nft: JSON.stringify(stake_nft),
                    stake_token: this.stake_token,
                    basic_id: this.id,
					key: this.params.key
                })
                this.loading = false
                uni.hideLoading()
                if (res.code == 0) {
					uni.showToast({
					  title: res.message,
					  icon: 'none'
					})
                    this.$refs.computing.reload()
                    this.stake_token = 0
                    this.selectNFT = []
                    this.$refs.walletComp_mining.onClose()
                }
            }else{
				uni.showToast({
				  title: '算力不足',
				  icon: 'none'
				})
			}
        },
        // 计算算力
        async checkOnData() {
            // if (this.blance < this.stake_token ) {
            //     uni.showToast({
            //         title: '您的余额不足！',
            //         icon: 'none'
            //     });
            //     this.disabled = true
            //     return 
            // }
            let stake_nft = this.selectNFT.map( item => {
                        item.nft_id = item.id
                        item.number =  item.numVal
                        return item
            })
            const res = await calculate({
                stake_nft: JSON.stringify(stake_nft),
                stake_token: this.stake_token,
                basic_id: this.id
            })
            if (res.code == 0) {
                this.power = res.data.calculate
                if (this.power > 0) {
                    this.disabled =  false
                }
            } else {
                this.disabled =  true
            }
			//this.disabled = false;
        },
		async fetchData(){
			let balance = await getTokenBalance(this.defaultWallet.address,this.symbol)
			this.blance = balance.data.amount;
		},
        // 更新nft数量
        updateSelectNums(arr) {
            this.closeDrawer()
            this.selectNFT = arr
        },
        showDrawer() {
           this.$refs.showRight.open();
        },
        closeDrawer() {
            this.$refs.showRight.close();
        },
        initPoolData() {
            this.blance = this.defaultWallet.passwordErrorNum
            const { windowWidth, windowHeight } = uni.getSystemInfoSync();
            this.drawerW = windowWidth * .9
        },
		gotoCheck(){
			uni.navigateTo({
			  url: "/pages/home/check"
			});
		},
		choseWallet(){
			uni.navigateTo({
			  url: '/pages/wallet/walletManager/index'
			});
		}
    }
    
};
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}

::v-deep.page-content {
  height: 100%;
  .uni-swiper-dots-horizontal {
      bottom: 15px;
      .uni-swiper-dot {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        transition: width 0.3s;
        background-color: #D8D8D8;
        &-active {
          width: 15px;
          background-color: #6781FF;
        }
      }
    }
}
::v-deep .maskShowIn {
    .uni-drawer__content {
        background: #F6F6F6;
    }
    
}
.tag-c {
    background: #5571F5;
    width: 130px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 15px;
}
.swiper-box{
	height: 210px;
}
page {
    background: #F6F6F6;
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.minh30 {min-height: 30rpx;}
.btn-c {
    display: block;
    margin-top:56rpx;
    width: 100%;
    height: 96rpx;
    line-height: 78rpx;
    font-size: 40rpx;
}
.zuji-item {background: #fff;border-radius: 10px;color:#6781FF;}
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
.dig-middle-button{  
	width: 246rpx;
	height: 86rpx;
	border-radius: 30rpx;
    display: flex;
    color: rgb(255, 255, 255);
    font-size: 24px;
    background-color: rgb(103, 129, 255);
    position: absolute;
    left: calc(50% - 100rpx);
	justify-content: center;
    margin-left: -15px;
    margin-top: 10rpx;
    border: 2px solid #fff;
    align-items: center;
}
.dig-middle-button{
	width: 86rpx;
	border-radius: 50%;
	left: calc(50% - 24rpx);
}
</style>
